:root {
    --font-family-default: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif, 'Microsoft Yahei', Simsun;
    --font-family-primary: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif, 'Microsoft Yahei', Simsun;
    --font-family-second: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif, 'Microsoft Yahei', Simsun;
    --font-yahei: 'microsoft yahei', 'pingfang sc', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --font-simsun: Simsun, 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --box-shadow: 9px 7px 8px 1px rgba(0,0,0,0.11);
    --box-shadow-2: 0px 6px 30px 0px rgb(0 0 0 / 10%);
    --box-shadow-default: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
    --box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
    --box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
    --box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
    --color-blue: #007bff;
    --color-gray:#6c757d;
    --color-green:#28a745;
    --color-red:#dc3545;
    --color-yellow:#ffc107;
    --color-lake-blue:#17a2b8;
    --color-dark:#343a40;
    --color-datk-2:#212529;
    --color-light-gray:#f3f3f3;

    --color-primary: #007bff;
    --color-primary-80: #007bff80;
    --color-primary-50: #007bff50;
    --color-primary-30: #007bff30;
    --color-primary-20: #007bff20;
    --color-primary-10: #007bff10;
    --color-second: #c33;
    --color-second-80: #cc333380;
    --color-second-50: #cc333350;
    --color-second-30: #cc333330;
    --color-second-20: #cc333320;
    --color-second-10: #cc333310;

    --btn-radius: .25rem;
}

html{
    font-size: 87.5%;   /*root default 14px*/
}
body{
    padding:0;
    height:100%;
    line-height:180%;
    font-family: var(--font-family-default);
}
@media (max-width: 767.99px) {
    .container.container-wide {
        margin:0 auto!important;
        padding:0!important;
    }
    .container.container-middle {
        margin:0 auto!important;
        padding:0!important;
    }
}
@media (min-width: 1600px) {
    .container.container-wide {
        max-width: 1400px;
    }
    .container.container-middle {
        max-width: 1330px;
    }
}
@media (min-width: 1920px) {
    .container.container-wide {
        max-width: 1620px;
    }
    .container.container-middle {
        max-width: 1330px;
    }
}
a, a:focus{
    text-decoration: none;
    color: #333;
}
a:hover{
    color: #000;
    text-decoration: none;
}
a,button{
    outline: none;
}


.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}
.no-style, .no-style ul, .no-style li{
    list-style:none;
    margin:0;
    padding:0;
}
.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.no-bg{background:none!important;}
.no-radius{border-radius:0;}

input[type="radio"]{cursor:pointer;}

.one-line{
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.two-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.three-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.four-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.five-line{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/*fix element plus ui*/
.my-form .el-form-item.no-label label{
    display:none!important;
}
.my-form .el-input-group.captcha .el-input-group__append{
    width:180px;
}
.my-form.el-form--label-left .el-form-item__label {
    text-align: right!important;
}
.my-form .captcha .el-input-group__append{
    box-shadow:none;
}
.my-form .my-array .el-form-item__content{
    display:block!important;
}
/**/

.stop-animation{
    animation-play-state: paused;
}

.play-animation{
    animation-play-state: running!important;
}


/*font style*/
.font-family-default{
    font-family: var(--font-family-default);
}
.font-family-1{
    font-family: var(--font-family-primary);
}
.font-family-2{
    font-family: var(--font-family-second);
}
.font-family-yahei{
    font-family: var(--font-yahei);
}
.font-family-simsun{
    font-family: var(--font-simsun);
}
.font-size-xl{
    font-size: 3rem;
    font-size: 42px\9;
}
.font-size-lg{
    font-size: 2.5rem;
    font-size: 35px\9;
}
.font-size-md{
    font-size: 1.8rem;
    font-size: 28px\9;
}
.font-size-sm{
    font-size: 1.5rem;
    font-size: 21px\9;
}
.font-size-xs{
    font-size: 1.14rem;
    font-size: 16px\9;
}
@media (max-width: 767px) {
    .font-size-xl{
        font-size: 2.5rem;
        font-size: 35px\9;
    }
    .font-size-lg{
        font-size: 2rem;
        font-size: 28px\9;
    }
    .font-size-md{
        font-size: 1.5rem;
        font-size: 21px\9;
    }
    .font-size-sm{
        font-size: 1.14rem;
        font-size: 16px\9;
    }
    .font-size-xs{
        font-size: 1rem;
        font-size: 14px\9;
    }
}

.font-weight-xl{
    font-weight: 900;
}
.font-weight-lg{
    font-weight: 700;
}
.font-weight-md{
    font-weight: 500;
}
.font-weight-sm{
    font-weight: 400;
}
.font-weight-xs{
    font-weight: 200;
}

.img-enlarge img { transition: all 0.5s!important; -webkit-transition: all 0.5s; }
.img-enlarge:hover img { transform: scale(1.1)!important; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); }


.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.float-none {
    float: none !important;
}

.shadow-right-xl {
    box-shadow: 7px 7px 8px 1px rgba(0,0,0,0.11);
    -webkit-box-shadow: 7px 7px 8px 1px rgba(0,0,0,0.11);
    -moz-box-shadow: 7px 7px 8px 1px rgba(0,0,0,0.11);
}
.shadow-right-sm{
    box-shadow:.125rem .125rem .25rem rgba(0,0,0,.075)!important;
}
.shadow-right{
    box-shadow:.5rem .5rem 1rem rgba(0,0,0,.15)!important;
}
.shadow-right-lg{
    box-shadow:1rem 1rem 3rem rgba(0,0,0,.175)!important;
}

.search-box-1 {
    z-index:9999;
    text-align:center;
}
.search-box-1 .modal-header, .search-box-1 .modal-footer{
    border:none;
}
.search-box-1 #search-keywords{
    height:36px;
    border-radius:18px 0 0 18px!important;
    line-height:45px;
    border-right:none;
    margin-right:0;
    float:none;
    display:inline-block;
}
.search-box-1 .hot-keywords{
    margin:25px 0;
}

.search-box-1 .btn-search{
    height:36px;
    border-radius:0 18px 18px 0 !important;
    margin-left:-5px !important;
    float:none;
    display:inline-block;
}

.search-box-1 .alert{
    display:none;
}


/*table cell*/
.display-table {
    display: table;
}
.display-table-row {
    display: table-row;
}
.display-table-cell {
    display: table-cell;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
button style
*/
.bg-color-1{
    background-color:#c6000f!important;
}
.bg-color-2{
    background-color:#f90;
}
.bg-color-3{
    background-color:#fff;
}

.btn-color-1{
    background-color:#c6000f;
    color:#fff;
}
.btn.btn-color-1{
    border-color:#c6000f;
    background-color:#c6000f;
}
.btn.btn-color-1:hover{
    border-color: #c6000f;
    background-color: #f52f1d;
    color:#fff;
}
.btn.btn-color-1:active{
    border-color: #c6000f;
    background-color: #ce2e1d;
    color:#fff;
}


.btn-1{
    border-radius: 0;
    border:1px solid #8c4500;
    padding:5px 25px;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    font-weight:300;
    font-family:'Microsoft Yahei'
}
.btn-lg.btn-1{
    border-radius: 20px !important;
    border-width: 2px;
    border-style: solid;
    font-size: 1.142rem;
    padding:8px 25px;
}

.btn-radius{
    border-radius: var(--btn-radius);
}
.btn-radius-half{
    border-radius: 19px;
}
.btn-sm-radius-half{
    border-radius: 15px;
}
.btn-lg-radius-half{
    border-radius: 25px;
}

.btn-pull-right{
    position: relative;
    z-index:1;
}
.btn-pull-right:after{
    transition: all 0.5s ease-in-out;
    content: ' ';
    position: absolute;
    width:0;
    height:100%;
    top:0;
    left:0;
    border-radius: 0.3rem;
    background-color:rgb(0,0,0,0.2);
    z-index:2;
}
.btn-pull-right:hover:after{
    background-color:rgb(0,0,0,0);
    width:100%;
}

.btn-pull-left{
    position: relative;
    z-index:1;
}
.btn-pull-left:after{
    transition: all 0.5s ease-in-out;
    content: ' ';
    position: absolute;
    width:0;
    height:100%;
    top:0;
    right:0;
    border-radius: 0.3rem;
    background-color:rgb(0,0,0,0.2);
    z-index:2;
}
.btn-pull-left:hover:after{
    background-color:rgb(0,0,0,0);
    width:100%;
}

.btn-lightning{
    position: relative;
    z-index:1;
    overflow:hidden;
    transition: all 0.5s ease;
}
.btn-lightning:hover{
    box-shadow: 0 10px 30px rgb(38 38 38 / 15%);
}
.btn-lightning:after{
    transition: all 0.5s ease;
    content: ' ';
    position: absolute;
    width:30px;
    height:200%;
    top:-10%;
    left:0;
    opacity: 1;
    background-color:rgb(255,255,255,0.2);
    z-index:2;
    transform: rotate(45deg) translateX(-200%);
}
.btn-lightning:hover:after{
    left:150%;
    opacity: 1;
}

.btn-circle-blur{
    position: relative;
    z-index:1;
    overflow:hidden;
}
.btn-circle-blur:after{
    transition: all 0.5s ease-in-out;
    content: ' ';
    position: absolute;
    width:0;
    height:0;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    background-color:rgb(0,0,0,0.2);
    z-index:2;
}
.btn-circle-blur:hover:after{
    width:200px;
    height:200px;
    background-color:rgb(0,0,0,0);
}

#mask-layer{
    position:fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(10, 10, 10, 0.5);
    z-index:998;
}
.modal-header, .modal-footer {border:none}


.m-6 {
    margin: 4.5rem !important;
}

.mt-6,
.my-6 {
    margin-top: 4.5rem !important;
}

.mr-6,
.mx-6 {
    margin-right: 4.5rem !important;
}

.mb-6,
.my-6 {
    margin-bottom: 4.5rem !important;
}

.ml-6,
.mx-6 {
    margin-left: 4.5rem !important;
}

.m-7 {
    margin: 6rem !important;
}

.mt-7,
.my-7 {
    margin-top: 6rem !important;
}

.mr-7,
.mx-7 {
    margin-right: 6rem !important;
}

.mb-7,
.my-7 {
    margin-bottom: 6rem !important;
}

.ml-7,
.mx-7 {
    margin-left: 6rem !important;
}

.p-6 {
    padding: 4.5rem !important;
}

.pt-6,
.py-6 {
    padding-top: 4.5rem !important;
}

.pr-6,
.px-6 {
    padding-right: 4.5rem !important;
}

.pb-6,
.py-6 {
    padding-bottom: 4.5rem !important;
}

.pl-6,
.px-6 {
    padding-left: 6rem !important;
}

.p-7 {
    padding: 6rem !important;
}

.pt-7,
.py-7 {
    padding-top: 6rem !important;
}

.pr-7,
.px-7 {
    padding-right: 6rem !important;
}

.pb-7,
.py-7 {
    padding-bottom: 6rem !important;
}

.pl-7,
.px-7 {
    padding-left: 6rem !important;
}